<html>
<head>
    <meta charset="UTF-8">
    <title>考勤</title>
</head>
<body>
<script type="text/javascript" src="./$.js"></script>
<script>
    require(['!this.js'], $$.load)
</script>
</body>
</html>
<template data-name="this.htm">
    <div>
        <head_top :head="menu_top"></head_top>
        <div class="contaniner">
            <div class="sidebar">
                <menu_child :nav_data="menu_child"></menu_child>
            </div>
            <div class="main-content">
                <div class="main">
                    <div class="tab-wrap">
                        <div class="main_hd no-tab">
                            <h2>考勤汇总</h2>
                        </div>
                    </div>
                    <div class="cf table-bar random-datepicker">
                        <div class="search-form fr">
                            <timeRange v-model="timeSelect"></timeRange>
                        </div>
                        <div class="fl">
                            <a class="btn btn_add btn_primary" @click="exportExcel"> 导出 Excel </a>
                        </div>
                    </div>
                    <div class="data-table inner_container_box side_r cell_layout">
                        <div class="inner_main">
                            <div class="bd" v-if="data">
                                <div class="global_mod user_group_opr">
                                    <span class="group_name">{{dpt_name}}</span>
                                    <a class="mod_link" v-if="data.page.item_total!=0">共{{data.page.item_total}}人</a>
                                </div>
                                <div class="table_wrp user_list">
                                    <table id="exportExcel">
                                        <thead>
                                        <tr>
                                            <th style="width: 15%;padding-left: 20px">姓名</th>
                                            <th style="width: 13%">编号</th>
                                            <th style="width: 13%">总天数</th>
                                            <th style="width: 12%">实到天数</th>
                                            <th style="width: 12%">签到次数</th>
                                            <th style="width: 20%">工作时长</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="list in data.list">
                                            <td style="padding-left: 20px">{{list.name}}</td>
                                            <td>{{list.user_id}}</td>
                                            <td>{{list.day_total}}</td>
                                            <td>{{list.day_come}}</td>
                                            <td>{{list.come_count}}</td>
                                            <td>{{list.work_time}}</td>
                                        </tr>
                                        <tr class="empty_item" v-if="data.list==''">
                                            <td class="empty_tips" colspan="100">暂无数据</td>
                                        </tr>

                                        </tbody>
                                    </table>
                                </div>
                                <div class="page_tool">
                                    <page :page_data="data.page" @page_click="go_page"></page>
                                </div>
                            </div>
                        </div>
                        <div class="inner_side">
                            <div class="bd">
                                <div class="group_list">
                                    <div class="inner_menu_box" v-if="depart">
                                        <dptTree :type="'dpt'" v-model="dptSelect" :body="depart"></dptTree>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <foot></foot>
    </div>
</template>

<script data-name="this.js">
    function get_lists(page) {
        $$.ajax({
            url: "/sys/user/kaoqin",
            data: {
                dpt_id: $$.m.dpt_id,
                page: page,
                rows: 50,
                start_time: $$.m.startDate,
                end_time: $$.m.endDate
            },
            result: {
                $200: function (ret) {
                    $$.m.data = ret.data;
                    $$.toast.hide();
                }
            }
        });
    }
    module.exports = {
        template: require('!this.htm'),
        methods: {
            go_page: function (page) {
                $$.toast.show();
                $$.public.scrollTop();
                get_lists(page)
            },
            exportExcel: function (e) {
                $$.public.exportExcel('exportExcel', '考勤情况');
            }
        },
        components: {
            'foot': $$.foot,
            'page': $$.page,
            'search': $$.search,
            'dptTree': require('../$res/component/dptTree'),
            'timeRange': require('../$res/component/timeRang')
        },
        watch: {
            dpt_id: function () {
                $$.toast.show();
                get_lists();
            },
            startDate: function () {
                $$.toast.show();
                get_lists();
            }
        },
        computed: {
            dptSelect: {
                get: function () {
                    return [this.dpt_id, this.dpt_name]
                },
                set: function (v) {
                    this.dpt_id = v[0];
                    this.dpt_name = v[1]
                }
            },
            timeSelect: {
                get: function () {
                    return [this.startDate, this.endDate]
                },
                set: function (v) {
                    this.startDate = v[0];
                    this.endDate = v[1]
                }
            }
        },
        loaded: function () {
            require('../$res/js/common');
            var moment = require("../$res/plugin/daterangepicker/moment");
            $$.m = {
                data: false,
                dpt_name: '',
                dpt_id: '',
                depart: false,
                startDate: moment().weekday(1).endOf('day').format('YYYY-MM-DD'),
                endDate: moment().format('YYYY-MM-DD')
            };
            $$.init_comps.head();
            $$.init_comps.menu();
            $$.toast.show();
            $$.public.get_depart(function () {
                get_lists();
            });
        }
    };
</script>